<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-row class="tac">
              <el-menu
                  :default-active=index
                  class="el-menu-vertical-demo">
                <el-menu-item index=1 @click="myP(1)">
                  <i class="el-icon-user"></i>
                  <span slot="title">人物</span>
                </el-menu-item>
                <el-menu-item index=2 @click="myP(2)">
                  <i class="el-icon-document"></i>
                  <span slot="title">记事板</span>
                </el-menu-item>
                <el-menu-item index=3 @click="myP(3)">
                  <i class="el-icon-user"></i>
                  <span slot="title">地图</span>
                </el-menu-item>
              </el-menu>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <RoomChatList></RoomChatList>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div v-if="index===3">
            <el-image
                style="width: 100%; height: 100%"
                :src="url">
            </el-image>
          </div>
          <div v-if="index===2">
            <p>记事板</p>
            <div class="trans">
              <div v-for="i in note_list">
                <div style="padding: 14px;">
                  <span>{{i.id}}</span>
                  <div class="bottom clearfix">
                  <span>
                    <p>
                      id: {{i.id}}
                    </p>
                    <p>
                      content: {{i.content}}
                    </p>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="index===1">
            <p>人物</p>
            <div class="trans">
              <div v-for="i in player_list">
                <div style="padding: 14px;">
                  <span>{{i.id}}</span>
                  <div class="bottom clearfix">
                  <span>
                    <p>
                      id: {{i.id}}
                    </p>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ChatRoom from "@/components/ChatRoom";
import RoomChatList from "@/components/RoomChatList";
export default {
  name: "room",
  components: {ChatRoom,RoomChatList},
  data () {
    return {
      url:require("../assets/1.jpg"),
      index:2,
      room_id:1,
      player_list: [
        {
          id:1,
        },
        {
          id:2,
        },
        {
          id:3,
        }
      ],
      note_list: [
        {
          id:1,
          content:"1"
        },
        {
          id:2,
          content:"2"
        },
        {
          id:3,
          content:"3"
        }
      ]
    }
  },
  methods:{
    myP:function (i){
      this.index=i
    }
  },
  watch(){

  },
  created() {
    // this.components.ChatRoom.room_id = this.room_id;
  }
}
</script>

<style scoped>
.bg-purple {
  background: #d3dce6;
  min-height: 600px;
  opacity: 0.8;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.map-show{
  max-width: 100%;
  max-height: 100%;
}
</style>